<template>
  <div class="show">
    <div class="title">我的动态</div>
    <div class="all" v-loading="loading">
      <ul class="msglist">
        <li class="list"
            @mouseenter="enter(index)"
            @mouseleave="leave(index)"
            v-for="(data,index) in msg.arr" :key="index"
        >
          <div style="margin-bottom: 20px">
            <span class="date"><el-icon><Clock/></el-icon>{{data.time}}</span><br>
          </div>
          <p class="titlelist"><el-icon><Promotion/></el-icon>{{data.title}}</p>
          <span class="content">{{data.content}}</span><br>
          <span class="manager" v-if="flag && index === current">
            <el-tooltip :visible="visible.edit" placement="top">
              <template #content>
                <span>修改动态</span>
              </template>
              <el-button @click="editMsg(index)" @mouseenter="visible.edit = true" @mouseleave="visible.edit = false" round>
                <el-icon><Edit/></el-icon>
              </el-button>
            </el-tooltip>
            <el-tooltip :visible="visible.detele" placement="top">
              <template #content>
                <span>删除动态</span>
              </template>
              <el-button @click="deleteMsg(data.id)"
                         @mouseenter="visible.detele = true"
                         @mouseleave="visible.detele = false"
                         round>
                <el-icon><Delete/></el-icon>
              </el-button>
            </el-tooltip>
          </span>
        </li>
      </ul>
    </div>
    <div class="pagination">
      <el-config-provider :locale="zhCn">
        <el-pagination
            @size-change="pageSizeChange"
            @current-change="pageNumChange"
            :current-page="pagination.pageNum"
            :page-sizes="[3, 6, 9, 12]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
        </el-pagination>
      </el-config-provider>
    </div>
    <el-dialog
        title="编辑试卷信息"
        v-model="dialogVisible"
        width="30%"
        align-center
        :before-close="handleClose">
      <section class="update">
        <el-form :model="msg.edit" ref="changMsgRef" status-icon>
          <el-form-item label="标题"
                        prop="title"
                        class="item"
                        :rules="[{required: true, message: '标题不能为空', trigger: 'change'}]">
            <el-input type="textarea"
                      class="input"
                      maxlength="20"
                      v-model="msg.edit.title"
                      :model-value="msg.edit.title"></el-input>
          </el-form-item>
          <el-form-item label="内容"
                        prop="content"
                        class="item"
                        :rules="[{required: true, message: '内容不能为空', trigger: 'change'}]">
            <el-input type="textarea"
                      :autosize="{ minRows: 2, maxRows: 4 }"
                      class="input"
                      v-model="msg.edit.content"
                      :model-value="msg.edit.content"></el-input>
          </el-form-item>
        </el-form>
      </section>
      <template v-slot:footer>
        <el-button @click="editBack()">取 消</el-button>
        <el-button type="primary" @click="editSubmit()">确 定</el-button>
      </template>

    </el-dialog>
  </div>
</template>

<script>
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import {Edit,Clock,Promotion,Delete} from '@element-plus/icons-vue';
import {ElMessage, ElMessageBox} from "element-plus";
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
export default {
  name: "myMessage",
  components: {Edit,Clock,Promotion,Delete},
  setup(){
    const {proxy} = getCurrentInstance()
    const changMsgRef = ref(null)
    let flag = ref(false)
    let current = ref(null)//鼠标移动到的当前页
    let loading = ref(false)
    let dialogVisible = ref(false)//对话框标志
    let pagination = reactive({
      pageNum: 1, //当前页
      total: Number(''), //记录条数
      pageSize: 3 //每页条数
    })
    let visible = reactive({
      edit: false,
      detele: false
    })
    let msg = reactive({
      arr: [],
      edit: {},
      editIndex: null
    })
    onMounted(()=>{
      getMsg()
    })
    function getMsg(){
      loading.value = true
      // eslint-disable-next-line no-undef
      proxy.$axios.get(`/messages/${pagination.pageNum}/${pagination.pageSize}/${$cookies.get("id")}`).then(
          response => {
            msg.arr = [...response.data.list]
            pagination.total = response.data.total
            pagination.pageNum = response.data.pageNum
            pagination.pageSize = response.data.pageSize
            loading.value = false
          },
          error => {
            console.log('请求失败', error.message)
          }
      )
    }
    function pageSizeChange(value){//改变当前记录条数
      pagination.pageSize = value
      getMsg()
    }
    function pageNumChange(value){//改变当前页码
      pagination.pageNum = value
      getMsg()
    }
    function enter(index) {
      flag.value = true
      current.value = index
    }
    function leave(index) {
      flag.value = false;
      current.value = index;
    }
    function editMsg(index){
      dialogVisible.value = true
      msg.edit = {...msg.arr[index]}
      msg.editIndex = index
      console.log(index)
      //router.push({path:"/manager/editMessgae",query:{id: id}})
    }
    function editSubmit(){
      proxy.$refs.changMsgRef.validate((valid) => {
        if (valid) {
          if (msg.arr[msg.editIndex].title === msg.edit.title && msg.arr[msg.editIndex].content === msg.edit.content){
            ElMessage({
              type: 'info',
              message: '标题和内容没有改动',
            })
            return false
          }
          proxy.$axios.put(
              // eslint-disable-next-line no-undef
              `/message/update`,
              {
                ...msg.edit,
                time: new Date()
              }
          ).then(
              response => {
                if (response.data) {
                  ElMessage({
                    type: 'success',
                    message: '修改成功',
                  })
                  //router.push({path: '/manager/myMessage'})
                  dialogVisible.value = false
                  getMsg()
                }
              },
              error => {
                console.log('请求失败', error.message)
              }
          )
        }else {
          return false
        }
      })

    }
    function editBack(){
      dialogVisible.value = false
      ElMessage({
        type: 'info',
        message: '取消修改',
      })
      proxy.$refs.changMsgRef.clearValidate()
    }
    function handleClose(done){
      ElMessageBox.confirm('确认关闭？',"",
        {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        }
      ).then(() => {
          done();
          ElMessage({
            type: 'info',
            message: '取消修改',
          })
      }).catch(() => {});
    }
    function deleteMsg(id) {
      ElMessageBox.confirm(
          '是否永久删除该动态,该操作不可逆！！！',
          '警告',
          {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning',
          }
      ).then(() => {
        proxy.$axios.delete(`/message/detele/${id}`).then(
            response => {
              if (response.data){
                ElMessage({
                  type: 'success',
                  message: '删除成功',
                })
                getMsg()
              }
            },
            error => {
              console.log('请求失败', error.message)
            }
        )
      }).catch(() => {
          ElMessage({
            type: 'info',
            message: '取消删除',
          })
      })
    }
    return{
      flag,
      current,
      pagination,
      visible,
      loading,
      msg,
      changMsgRef,
      dialogVisible,
      pageNumChange,
      pageSizeChange,
      enter,
      leave,
      editMsg,
      deleteMsg,
      editSubmit,
      editBack,
      handleClose,
      zhCn
    }
  }
}
</script>

<style scoped>
.show{
  margin: 100px auto;
  width: 80%;
  height: 610px;
  border: 5px solid lightcyan;
  transition: all 0.9s;
  border-radius: 10px;
}
.show:hover{
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.4);
  margin-top: 90px;
}
.all{
  list-style-position: inside;
}
.all .date {
  color: #0AEECBFF;
  font-size: 15px;
}
.date{
  width: 200px;
  position: absolute;
  margin-top: 5px;
  left: 200px;
}
.list {
  background-color: #eee;
  padding: 10px;
  border-radius: 4px;
  margin: 10px 0px;
  position: relative;
  transition: all .3s ease;
}
.title {
  text-align: center;
  font-size: 20px;
  margin: 20px;
  color: #2CD9D9FF;
  display: flex;
  justify-content: center;
}
.titlelist{
  font-size: 10px;
}
.manager {
  position: absolute;
  right: 30px;
  bottom: 10px;
  color: tomato;
  cursor: pointer;
  transition: all .3s ease;
}
.content{
  text-align: center;
  line-height: 30px;
}
.pagination{
  display: flex;
  justify-content: center;
}
</style>